iT邦幫忙

0

React-依視窗大小改變DOM

  • 分享至 

  • xImage
  •  

在class component上
一開始必須得在construtor上導入state判斷視窗大小
是否大於或等於節點
此處是在於當視窗onload時判斷大小進而偵測state

this.state={
  size: document.body.offsetWidth<769?true:false
}

之後為了縮放視窗時
能夠偵測視窗狀態,縮放大小時改變state
必須在componentDidMount做一個resize動作來重新偵測

window.onresize=()=>{
   this.setState({
      size:document.body.offsetWidth<769?true:false
   });
}

當然在render內必須解構附值size
並給予布林值條件

const {size}=this.state;
const Size=size?'':<br/>;

此處即為dom縮放視窗後所要改變的目標物
即視窗大於769px後會加上
小於769時br標籤會拿掉


在改為function component後
首先一樣使用useState設定初始state:size
並給予改變size的函式setSize

const [size,setChbr]=useState(
   document.body.offsetWidth<769?true:false
);

接著改寫視窗改變時的resize狀態

window.onresize=()=>{
    setSsiez(
        document.body.offsetWidth<769?true:false
    );
};

此處因在function component的關係
不需要使用constructor與componentDidMount
最後給予判斷式

const Size=size?'':<br/>;

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言